<template>
  <div class="register">
    <div class="content">
      <div class="register-box">
        <p class="title">用户注册</p>
        <form>
          <input
            name="username"
            v-model="username"
            type="text"
            class="username"
            placeholder="请输入用户名"
          />
          <input
            name="password"
            v-model="password"
            type="password"
            class="password"
            placeholder="请输入密码"
          />
          <input
            name="confirmPassword"
            v-model="confirmPassword"
            type="password"
            class="password"
            placeholder="请确认密码"
          />
          <input name="address" v-model="address" type="text" class="address" placeholder="地址" />
          <div style="width: 238px; margin-left: 80px; margin-bottom: 10px; color:#fff;">
            <div>
              <el-radio class="radio reg-el-radio" v-model="sex" label="0">女</el-radio>
              <el-radio class="radio reg-el-radio" v-model="sex" label="1">男</el-radio>
              <el-radio class="radio reg-el-radio" v-model="sex" label="2">保密</el-radio>
            </div>
            <div style="margin-top: 10px; margin-bottom: -6px;">
              <el-date-picker
                v-model="birthday"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                class="filter-item"
                placeholder="生日"
              />
            </div>
          </div>

          <br />
          <el-button type="primary" @click="register()" class="register_btn">确认注册</el-button>
        </form>
        <div>
          <div class="div_b">
            <a>
              <router-link :to="{name: 'login'}">
                <img src="../assets/images/Login.png" />
              </router-link>
            </a>
            <br />账号登录
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "register",
  // 监听enter键， 登录
  mounted() {
    // 绑定enter事件
    this.enterKeyup();
  },
  destroyed() {
    // 销毁enter事件
    this.enterKeyupDestroyed();
  },
  methods: {
    register: function() {
      this.$api.login
        .register({
          // TODO lsl 此处的参数待修改
          username: this.username,
          password: this.password,
          confirmPassword: this.confirmPassword,
          sex: this.sex,
          address: this.address,
          birthday: this.birthday
        })
        // 成功返回 -- status:200, 非000000返回码皆在response拦截器处理掉
        .then(res => {
          if (!res) {
            return;
          }

          this.$message({
            type: "success",
            message: "注册成功"
          });

          // 正确逻辑处理, 跳转到登录页
          this.$router.push("/");
        });
    },

    enterKey(event) {
      const componentName = this.$options.name;
      if (componentName == "register") {
        const code = event.keyCode
          ? event.keyCode
          : event.which
          ? event.which
          : event.charCode;
        if (code == 13) {
          this.register();
        }
      }
    },
    enterKeyupDestroyed() {
      document.removeEventListener("keyup", this.enterKey);
    },
    enterKeyup() {
      document.addEventListener("keyup", this.enterKey);
    }
  },
  data() {
    return {
      username: "",
      password: "",
      confirmPassword: "",
      sex: "2",
      birthday: "",
      address: ""
    };
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  border: 0;
}

*:focus {
  outline: none;
}

.register {
  height: 800px;
  width: 100%;
  /* position: absolute; */
  z-index: 2;
  background-color: aquam、arine;
  position: fixed;
}

.register .content {
  background-image: url(../assets/images/pic.png);
  background-repeat: no-repeat;
  background-position: 80px center;
  height: 400px;
  margin-top: 150px;
}

.register .content .register-box {
  background-color: #3f1675;
  float: right;
  height: 470px;
  width: 380px;
  border-radius: 3px;
  margin-top: 24px;
  margin-right: 100px;
}

.register .content .register-box .title {
  font-family: "Microsoft Sans Serif", Arial;
  font-size: 28px;
  line-height: 90px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  display: block;
  width: 100%;
}

.register .content .register-box .username {
  font-family: "Microsoft Sans Serif", Arial;
  font-size: 14px;
  line-height: 32px;
  color: #333;
  background-color: #fff;
  background-image: url(../assets/images/user.png);
  background-repeat: no-repeat;
  background-position: 10px center;
  text-indent: 28px;
  display: block;
  width: 238px;
  height: 32px;
  border: 1px solid #5691cc;
  border-radius: 18px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

.register .content .register-box .password {
  font-family: "Microsoft Sans Serif", Arial;
  font-size: 14px;
  line-height: 32px;
  color: #333;
  background-color: #fff;
  background-image: url(../assets/images/Key.png);
  background-repeat: no-repeat;
  background-position: 10px center;
  text-indent: 28px;
  display: block;
  width: 238px;
  height: 32px;
  border: 1px solid #5691cc;
  border-radius: 18px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

.register .content .register-box .address {
  font-family: "Microsoft Sans Serif", Arial;
  font-size: 14px;
  line-height: 32px;
  color: #333;
  background-color: #fff;
  background-image: url(../assets/images/address.png);
  background-repeat: no-repeat;
  background-position: 10px center;
  text-indent: 28px;
  display: block;
  width: 238px;
  height: 32px;
  border: 1px solid #5691cc;
  border-radius: 18px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

.register .content .register-box .get_token_btn {
  font-family: "Microsoft Sans Serif", Arial;
  font-size: 14px;
  line-height: 32px;
  color: #fff;
  text-align: center;
  width: 80px;
  height: 32px;
  border: 1px solid #fff;
  border-radius: 8px;
  margin-left: 15px;
  margin-right: auto;
  margin-bottom: 20px;
  margin-top: 10px;
  text-decoration: none;
}

.register .content .register-box .token {
  font-family: "Microsoft Sans Serif", Arial;
  font-size: 14px;
  line-height: 32px;
  color: #333;
  background-image: url(../assets/images/Token.png);
  background-repeat: no-repeat;
  background-position: 10px center;
  text-indent: 28px;
  width: 108px;
  height: 32px;
  border: 1px solid #5691cc;
  border-radius: 18px;
  margin-left: 70px;
  margin-right: auto;
  margin-bottom: 20px;
}

.register .content .register-box .label {
  font-family: "Microsoft Sans Serif", Arial;
  margin-top: 5px;
  margin-left: 72px;
  width: 300px;
  display: block;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}

.register .content .register-box .register_btn {
  width: 238px;
  height: 39px;
  border: 0.5px solid #fff;
  margin-left: 70px;
  margin-top: -10px;
}

a {
  color: rgb(101, 192, 196);
  text-decoration: underline;
}

.div_b {
  text-align: center;
  margin-top: 20px;
  /* margin-left: 20px; */
  margin-bottom: 20px;
  float: center;
  font-size: 10px;
  color: #fff;
}

.phone-button-disabled {
  background-color: grey;
  cursor: not-allowed;
}

.phone-button-enabled {
  background-color: #409eff;
  cursor: pointer;
}

.reg-el-radio {
  color: #fff;
  margin-left: 15px;
}
</style>
